<script setup>
import { ref,defineProps } from 'vue'
import ComectionChildChild from './ComectionChildChild.vue';
import LeftTopChild from './LeftTopChild.vue';
import {useRouter} from 'vue-router'
const  router = useRouter()

const commonfunctions = ref("常用功能")

const toolsettings = ref("工具设置")

const bankcord = ref("绑定银行卡")

const recharge = ref("充值")

const withdrawal = ref("提现")

const selectmerchant = ref("向商户付款")

const scancodepayment = ref("扫码付款")

const NFCpayment = ref("NFC支付")

const wallettransfer =ref("钱包转账")

const transactionrecords = ref("交易记录")

const collectmoney = ref("收钱")

const consumptionanalysis = ref("个人中心")

const props = defineProps(['content'])

function linkto(url){
    router.push(url)
}

</script>
<template>
    <div class="radius">
         <LeftTopChild :type="commonfunctions"></LeftTopChild>
        <el-row>
            <el-col :span="6">
                <ComectionChildChild :type="bankcord"  @click="$emit('change',bankcord),linkto('/card-bound')" />
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="recharge"  @click="$emit('change',recharge),linkto('/recharge')"  />
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="withdrawal"   @click="$emit('change',withdrawal),linkto('/withdrawal')"/>
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="selectmerchant"  @click="$emit('change',selectmerchant),linkto('/select-merchant-payment')" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <ComectionChildChild :type="scancodepayment"  @click="$emit('change',scancodepayment) ,linkto('/scan-code-payment')" />
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="NFCpayment"  @click="$emit('change',NFCpayment) ,linkto('/NFCpayment')" />
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="wallettransfer"   @click="$emit('change',wallettransfer),linkto('/wallet-transfer')"/>
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="transactionrecords"   @click="$emit('change',transactionrecords),linkto('ransaction-records')"/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <ComectionChildChild :type="collectmoney"   @click="$emit('change',collectmoney),linkto('/collection')"/>
            </el-col>
            <el-col :span="6">
                <ComectionChildChild :type="consumptionanalysis"   @click="$emit('change',consumptionanalysis),linkto('/person-center')"/>
            </el-col>
            <el-col :span="6">
                <!-- <ComectionChildChild :type="bonuspoints"   @click="$emit('change',bonuspoints),linkto('/recharge')"/> -->
            </el-col>
            <el-col :span="6">

            </el-col>
        </el-row>
    </div>
</template>
<style scoped>
.radius {
    user-select: none;
    margin-top: 10px;
    height: 240px;
    width: 100%;
    border: 1px;
    border-radius: 10px;
    background-color: rgb(240, 245, 240);
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    margin-top: 5px;
}</style>